<template>
 <div>
    <p>app.vue的p</p>
    <h2>app的h2</h2>
    <!-- 在这里写组件标签，相当于写了组件最外层的根标签 -->
    <!-- 所以如果你加了scoped，能给组件最外层的根标签，但是无法给组件内部的标签用 -->
    <my-son></my-son>
    <my-son2></my-son2>
 </div>
</template>

<script>
import MySon from './components/MySon.vue';
import MySon2 from './components/MySon2.vue';
export default {
  components: {
    MySon,
    MySon2
  }
}
</script>


<style scoped>
/* scoped最大的特点是：把样式变成局部的 */
/* 
具体一点：
  能给当前组件写过的标签用，没写的标签就没法用
  就意味着组件内部生成标签的无法用
*/
/* p {
  color: red;
} */

/* 如果就是希望，某个样式能作用到组件内部，就要用 深度作用选择器 */
/* 有些人也把深度作用选择器叫成样式穿透 */
/*
  >>>
  /deep/
  ::v-deep （建议）
*/
::v-deep p {
  color: red;
}

h2 {
  color: #0f0;
}
</style>